<template>
  <el-row>
    <el-button type="primary" v-per2="['permission-list','post']" @click="doSyncPermission">同步权限</el-button>
    <el-button type="success" v-per2="['permission-list','post']" v-if="!state.isEdit" @click="doEditPermission">编辑权限
      <el-icon class="el-icon--edit">
        <Edit/>
      </el-icon>
    </el-button>
    <el-button type="primary" v-per2="['permission-list','post']" v-else @click="doSavePermission">保存权限
      <el-icon>
        <Check/>
      </el-icon>
    </el-button>
  </el-row>
  <el-row style="margin-top:20px;">
    <el-form ref="searchFormRef" :inline="true" :model="state.searchForm">
      <el-form-item label="菜单名称" prop="name">
        <el-input style="width: 100px;" v-model="state.searchForm.name" placeholder="菜单" clearable/>
      </el-form-item>
      <el-form-item label="权限名称" prop="title">
        <el-input style="width: 100px;" v-model="state.searchForm.title" placeholder="权限" clearable/>
      </el-form-item>
      <el-form-item label="方法" prop="method">
        <el-select
            v-model="state.searchForm.method"
            placeholder="请选择"
            clearable
            filterable
            style="width: 150px;"
        >
          <el-option label="get" value="get"/>
          <el-option label="post" value="post"/>
          <el-option label="patch" value="patch"/>
          <el-option label="put" value="put"/>
          <el-option label="delete" value="delete"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doSearch">搜 索</el-button>
        <el-button type="primary" @click="doResetSearchForm" plain>重 置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="state.tableData" border style="width: 100%" v-loading="state.isLoading"
              v-per2="['permission-list','get']">
      <el-table-column prop="name" label="菜单名称" width="180"/>
      <el-table-column prop="route" label="路由" width="180"/>
      <el-table-column prop="method" label="方法"/>
      <el-table-column label="权限名称">
        <template #default="scope">
          <el-input v-if="scope.row.editing" v-model="scope.row.title"></el-input>
          <span v-else>{{ scope.row.title }}</span>
        </template>

      </el-table-column>
    </el-table>
  </el-row>
</template>

<script setup>
import {onMounted, reactive,ref} from "vue";
import _axios from "@/plugin/axios.js";
import {ElMessage} from "element-plus";
import {hasPermission2} from "@/stores/permission.js";

const searchFormRef = ref(null)
const state = reactive({
  tableData: [],
  isLoading: false,
  isEdit: false,
  searchForm: {
    name: "",
    title: "",
    method: ""
  }
})
onMounted(() => {
  initTable()
})

function initTable() {
  if (hasPermission2('permission-list', 'get')) {
    let search_params = {}
    for (let key in state.searchForm){
      let value = state.searchForm[key]
      if(!value){
        continue
      }
      search_params[key] = value
    }
    state.isLoading = true
    _axios.get("api/rbac/permission/",{params:search_params}).then((res) => {
      if (res.data.code === 0) {
        state.tableData = res.data.data
        state.tableData.forEach((item) => {
          item.editing = false
        })
        state.isLoading = false
      } else {
        ElMessage.error("加载失败")
      }
    }).finally(() => {
      // state.isLoading = false
    })
  }
}

function doSyncPermission() {
  _axios.post("api/rbac/permission/").then((res) => {
    if (res.data.code === 0) {
      initTable()
      ElMessage.success("同步成功")
    } else {
      ElMessage.error("同步失败")
    }
  })
}

function doEditPermission() {
  state.tableData.forEach((item) => {
    item.editing = true
  })
  state.isEdit = true
}

function doSavePermission() {
  state.tableData.forEach((item) => {
    item.editing = false
  })
  _axios.patch("api/rbac/permission/title/", state.tableData).then((res) => {
    if (res.data.code === 0) {
      ElMessage.success("编辑成功")
    } else {
      ElMessage.error("编辑失败")
    }
  })
  state.isEdit = false
}
function doSearch(){
  initTable()
}
function doResetSearchForm(){
  searchFormRef.value.resetFields()
}
</script>

<style scoped>

</style>